<template>
	<el-card shadow="hover">
		<el-form :model="queryParams" ref="queryFormRef" :inline="true">
			<el-form-item label="关联供应商" prop="supplier_id">
				<el-select
					v-model="queryParams.supplier_id"
					clearable
					placeholder="请输入关键字或选择供应商"
					filterable
					remote
					:remote-method="supplierIdRemoteMethod"
					remote-show-suffix
					:loading="supplierSelect.loading"
					@focus="onSupplierFocus"
				>
					<el-option v-for="item in supplierSelect.options" :key="item.id" :label="item.title" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="onResetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableList" v-loading="loading">
			<el-table-column label="提现单号" align="center" prop="withdrawal_no" />
			<el-table-column label="提现时间" align="center" prop="create_time" />
			<el-table-column label="提现金额" align="center" prop="apply_money" />
			<el-table-column label="结算卡联行号" align="center" prop="bank_code" />
			<el-table-column label="结算银行卡开户名" align="center" prop="account_name" />
			<el-table-column label="结算银行卡账号" align="center" prop="account_no" />
			<el-table-column label="手续费" align="center" prop="procedure_money" />
			<el-table-column label="应到账金额" align="center" prop="money" />
			<el-table-column label="实际到账金额" align="center" prop="money_deserved" />
			<el-table-column label="打款状态" align="center" prop="payment_status" :formatter="formatterPaymentStatus" />
			<el-table-column label="打款失败原因" align="center">
				<template #default="{ row }">
					<el-tooltip v-if="row.payment_status === 3 && row.fail_reason" effect="light" :content="row.fail_reason" placement="top">
						<el-button>查看</el-button>
					</el-tooltip>
					<span v-else>----</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" fixed="right">
				<template #default="{ row }">
					<el-button v-if="row.payment_status === 3" @click="onRecredit(row)" type="text">重新打款</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
	</el-card>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus';
import { supplierApi, supplierWithdrawalApi } from '/@/api/admin';

const SupplierApi = supplierApi();
const SupplierWithdrawalApi = supplierWithdrawalApi();
export default {
	name: 'supplierWithdrawalRecords',
	data() {
		return {
			queryParams: {
				supplier_id: '',
				pageNum: 1,
				pageSize: 10,
			},
			tableList: [],
			loading: false,
			total: 0,
			supplierSelect: {
				loading: false,
				options: [],
			},
		};
	},
	created() {
		this.getList();
	},
	methods: {
		/********** 触发事件 **********/
		// 关联供应商获取焦点
		onSupplierFocus() {
			if (!this.queryParams.supplier_id) {
				this._supplierList({ pageNum: 1, pageSize: 10 });
			}
		},
		// 搜索
		onQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		// 重置
		onResetQuery() {
			this.$refs.queryFormRef.resetFields();
			this.onQuery();
		},
		// 重新打款
		onRecredit(row) {
			ElMessageBox.confirm('您确定重新打款吗?', '确认消息', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				this._supplierRepayment({ payment_id: row.id });
			});
		},

		/********** 方法事件 **********/
		// 刷新列表
		getList() {
			this.loading = true;
			this._supplierWithdrawalPaymentList(this.queryParams);
		},
		// 关联供应商搜索
		supplierIdRemoteMethod(query) {
			if (!query) return;
			this._supplierList({ pageNum: 1, pageSize: 10, title: query });
		},
		// 打款状态字典
		formatterPaymentStatus(row) {
			switch (row.payment_status) {
				case 0:
					return '待打款';
				case 1:
					return '打款中';
				case 2:
					return '打款成功';
				case 3:
					return '打款失败';
				default:
					return '未知错误';
			}
		},

		/********** 网络请求 **********/
		// 供应商列表
		_supplierList(params) {
			this.supplierSelect.loading = true;
			SupplierApi.supplierList(params)
				.then((res) => {
					this.supplierSelect.options = res.data.list;
					this.supplierSelect.loading = false;
				})
				.catch(() => (this.supplierSelect.loading = false));
		},
		// 供应商货款打款列表
		_supplierWithdrawalPaymentList(params) {
			SupplierWithdrawalApi.supplierWithdrawalPaymentList(params)
				.then((res) => {
					this.tableList = res.data.list;
					this.total = res.data.total;
					this.loading = false;
				})
				.catch(() => (this.loading = false));
		},
		// 重新打款
		_supplierRepayment(params) {
			SupplierWithdrawalApi.supplierRepayment(params).then(() => {
				ElMessage.success('操作成功');
				this.getList();
			});
		},
	},
};
</script>
